<script setup>
import {ref, onMounted} from 'vue'
import { sessionApi, personalApi, exitApi } from '@/common/api'
import router from '@/common/router'
import Note from '@/components/notify'
import Msg from '@/components/message'

// 自动加载，判断权限
onMounted(() => {
  getUserInfo()
})

const userInfo = {
  userId: '',
  nickName: '',
  usname: '',
  mobile: '',
  oldPasswd: '',
  newPasswd: '',
  agnPasswd: '',
}
const userRef = ref(userInfo)
const getUserInfo = async () => {
  const res = await sessionApi()
  if (res.code === 200) {
    userRef.value = res.data
    userRef.value.oldPasswd = ''
    userRef.value.newPasswd = ''
    userRef.value.agnPasswd = ''
  } else {
    Msg({ kind: 'error', txt: res.msg })
    router.replace('/login')
  }
}

// save 保存提交
const save = async () => {
  let usname = userRef.value.usname
  let oldPasswd = userRef.value.oldPasswd
  let newPasswd = userRef.value.newPasswd
  let agnPasswd = userRef.value.agnPasswd
  let nickName = userRef.value.nickName
  let mobile = userRef.value.mobile
  if(nickName === '' || nickName.length > 50) {
    Msg({ kind: 'warn', txt: '用户的昵称不能为空，且长度不超过50个字符！' })
    return
  } else if(usname === '' || usname.length > 50) {
    Msg({ kind: 'warn', txt: '登录账号不能为空，且长度不超过50个字符！' })
    return
  } else if(mobile === '' || mobile.length !== 11) {
    Msg({ kind: 'warn', txt: '手机号码不能为空，且长度为11个字符！' })
    return
  }
  if(oldPasswd !== "") {
    if(newPasswd==='' || agnPasswd==='') {
      Msg({ kind: 'warn', txt: '新密码和重复密码不能为空！' })
      return
    } else if(newPasswd!==agnPasswd) {
      Msg({ kind: 'warn', txt: '两次新密码不一致，请检查！' })
      return
    }
  }
  const res = await personalApi(userRef.value)
  if(res.code === 200) {
    exit()
  } else {
    Msg({ kind: 'error', txt: res.msg })
  }
}

// 用户登出
const exit = async () => {
  const res = await exitApi()
  if(res.code === 200) {
    Note({ kind: 'success', title: '成功', txt: '恭喜您，个人资料修改成功，请重新登录！' })
    router.replace('/')
  } else {
    Msg({ kind: 'error', txt: res.msg })
  }
}
</script>

<template>
  <div class="a">
    <div>
      <div class="ipt-title"><span class="required">*</span>用户昵称</div>
      <div><input type="text" v-model="userRef.nickName" maxlength="50" placeholder="请输入用户名称" class="txt" /></div>
    </div>
    <div>
      <div class="ipt-title"><span class="required">*</span>登录账号</div>
      <div><input type="text" v-model="userRef.usname" maxlength="50" placeholder="请输入登录账号" class="txt" /></div>
    </div>
    <div>
      <div class="ipt-title">原密码</div>
      <div><input type="text" v-model="userRef.oldPasswd" maxlength="30" placeholder="请输入原密码，不修改密码则置空" class="txt" /></div>
    </div>
    <div>
      <div class="ipt-title">新密码</div>
      <div><input type="text" v-model="userRef.newPasswd" maxlength="30" placeholder="请输入新密码" class="txt" /></div>
    </div>
    <div>
      <div class="ipt-title">重复密码</div>
      <div><input type="text" v-model="userRef.agnPasswd" maxlength="30" placeholder="请再次输入新密码" class="txt" /></div>
    </div>
    <div>
      <div class="ipt-title"><span class="required">*</span>手机号码</div>
      <div><input type="text" v-model="userRef.mobile" maxlength="11" placeholder="手机号码" class="txt" /></div>
    </div>
    <div class="b">
      <div class="btn-p" style="height: 40px; line-height: 40px;" @click="save()"><i class="iconfont today_fill"></i> 保存</div>
    </div>
  </div>
</template>

<style scoped>
.a {width: 600px; margin: 10px auto;}
.b {padding-top: 20px;}
</style>
